﻿@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>餐次定义</title>
    <link rel="stylesheet" type="text/css" href="~/Content/jquery-easyui-1.4.2/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="~/Content/jquery-easyui-1.4.2/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="~/Content/jquery-easyui-1.4.2/demo.css">
    <link href="~/Content/Styles/Manage_Order.css" rel="stylesheet" />
    <script type="text/javascript" src="~/Content/jquery-easyui-1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="~/Content/jquery-easyui-1.4.2/jquery.easyui.min.js"></script>
    <script src="~/Content/jquery-easyui-1.4.2/locale/easyui-lang-zh_CN.js"></script>
    <script src="~/Content/jquery-easyui-1.4.2/jquery.Jcrop.js"></script>
    <link href="~/Content/Script/jquery.Jcrop.css" rel="stylesheet" />
    <script>
        $(function () {
            var merid;
            getmer();//加载操作员管理的所有商户
            $('#btnadd').linkbutton('disable');
            $('#btnedit').linkbutton('disable');
            $('#btndell').linkbutton('disable');
        });

        ///获取操作员下面的商户
        function getmer() {
            $.ajax({
                url: '/CanCi/getmer',
                dataType: 'json',
                success: function (res) {
                    var data = JSON.parse(res);
                    $('#searchMer').combobox({
                        data: data,
                        valueField: 'MerID',
                        textField: 'MerName',
                        onSelect: function (record) {
                            initTable(record.MerID);
                            $('#btnadd').linkbutton('enable');
                            $('#btnedit').linkbutton('enable');
                            $('#btndell').linkbutton('enable');
                        }
                    });
                }
            });
        }

        //初始化表格 获取对应商户所有餐次
        function initTable(pos) {
            merid = pos;
            $('#View').datagrid({
                iconCls: 'icon-user',
                loadMsg: '数据加载中...',
                fitColumns: false,
                singleSelect: true,
                nowrap: true,
                autoRowHeight: true,
                striped: true,
                url: '/CanCi/GetMealInfo?merid=' + pos,
                sortName: 'MealID',
                sortOrder: 'asc',
                border: true,
                remoteSort: false,
                idField: 'MealID',
                pageSize: 10,
                pagination: true,
                rownumbers: true,
                columns: [[
                    { field: 'MealID', title: '餐次ID', sortable: true, hidden: true },
                    { field: 'MealName', title: '餐次名称' },
                    { field: 'BZ', title: '备注' },
                    {
                        field: 'opt', title: '操作', width: 100, align: 'center',formatter: function (value, rec) {
                            var btn = '<a class="editcls" onclick="editRow(\'' + rec.MealID + '\')" href="javascript:void(0)">编辑菜品</a>';
                            return btn;
                        }
                    }

                ]],
                toolbar: '#tb1'
            });
        }

        ///编辑菜品
        function editRow(v) {
            $('#EditCCDialog').dialog('open').dialog('setTitle', '编辑餐次菜品');
            DishesTable();
        }

        ///新增dialog
        function AddDialog() {
            $('#AddBoxDialog').dialog('open').dialog('setTitle', '新增餐次');
            clear();
        }
        ///新增提交fn
        function BindAddBoxClickEvent() {
            //验证所有的文本框是否通过用户的验证
            var valid = $('#add_form').form('validate');
            if (valid == false) {
                return false;
            }
            var postdata = {
                MealName: $("#add_boxname").textbox('getValue'),
                MealState: 1,
                Sort: 0,
                MerID: merid,
                BZ: $("#add_bz").textbox('getValue'),
            };
            //发送异步请求到后台保存用户数据
            $.post("/CanCi/updateMeal?tag=" + 1, postdata, function (data) {
                if (data == "1") {
                    $('#AddBoxDialog').dialog('close');
                    $("#View").datagrid("reload");
                }
                else {
                    $.messager.alert("友情提示", "添加失败");
                }
            });
        }

        //删除餐次
        function DeleteDialog() {
            var checkdata = $("#View").datagrid("getSelections");//获取整行数据
            if (checkdata.length == 1) {
                var checkdata = $("#View").datagrid("getSelections")[0];//获取整行数据
                var postdata = {
                    MerID: checkdata.MerID,
                    MealID: checkdata.MealID,
                    MealName: checkdata.MealName,
                    SheID: checkdata.SheID,
                };
                //console.log(postdata);
                //发送异步请求删除数据
                $.messager.confirm("删除信息", "您确认删除<font color='Red' size='3'>" + checkdata.MealName + "</font>这个餐次吗？", function (Del) {
                    if (Del) {
                        $.post("/CanCi/updateMeal?tag=" + 3, postdata, function (data) {
                            if (data == "1") {
                                $.messager.alert("友情提示", "删除成功");
                                $("#View").datagrid('reload');
                            }
                            else {
                                $.messager.alert("友情提示", "删除失败:" + data);
                            }
                        });
                    }
                });
            }

            else {
                $.messager.alert("友情提示", "每次只能删除一行数据，你已经选择了<font color='red' size='6'>" + checkdata.length + "</font>行");
            }
        }

        //编辑菜品
        function DishesTable() {
            $('#tt').datagrid({
                loadMsg: '数据加载中...',
                fitColumns: false,
                nowrap: true,
                autoRowHeight: true,
                striped: true,
                url: '/CanCi/getgrid?merid=' + merid,
                sortName: 'DishesID',
                sortOrder: 'asc',
                singleSelect: true,
                border: true,
                remoteSort: false,
                idField: 'DishesID',
                pageSize: 100,
                pagination: true,
                pageList: [100],
                rownumbers: true,
                toolbar: '#tb1',
                onBeforeEdit: function (index, row) {
                    row.editing = true;
                    updateActions(index);
                },
                onAfterEdit: function (index, row) {
                    row.editing = false;
                    updateActions(index);
                },
                onCancelEdit: function (index, row) {
                    row.editing = false;
                    updateActions(index);
                }
            });
        }
        function formatAction(value, row, index) {
            if (row.editing) {
                var s = '<a href="#" onclick="saverow(this)">保存</a> ';
                var c = '<a href="#" onclick="cancelrow(this)">取消</a>';
                return s + c;
            } else {
                var e = '<a href="#" onclick="editrow(this)">编辑</a> ';
                return e;
            }
        }
        //获取当前编辑的行
        function getRowIndex(target) {
            var tr = $(target).closest('tr.datagrid-row');
            return parseInt(tr.attr('datagrid-row-index'));
        }
        //编辑行
        function editrow(target) {
            $('#tt').datagrid('beginEdit', getRowIndex(target));
        }

        //保存行编辑信息
        function saverow(target) {
            $('#tt').datagrid('endEdit', getRowIndex(target));
        }
        //取消行编辑
        function cancelrow(target) {
            $('#tt').datagrid('cancelEdit', getRowIndex(target));
        }

        //进行编辑datagrid时设置
        $.extend($.fn.datagrid.defaults.editors, {
            numberspinner: {
                init: function (container, options) {
                    var input = $('<input type="text">').appendTo(container);
                    return input.numberspinner(options);
                },
                destroy: function (target) {
                    $(target).numberspinner('destroy');
                },
                getValue: function (target) {
                    return $(target).numberspinner('getValue');
                },
                setValue: function (target, value) {
                    $(target).numberspinner('setValue', value);
                },
                resize: function (target, width) {
                    $(target).numberspinner('resize', width);
                }
            }
        });
        //更新
        function updateActions(index) {
            $('#tt').datagrid('updateRow', {
                index: index,
                row: {}
            });
        }

        function clear() {
            $("#add_boxname").textbox('setValue', "");
            $("#add_bz").textbox('setValue', "");
        }
    </script>
</head>
<body style="padding:0;">
    <div style="padding: 5px; background-color: #F4F4F4">
        <div>
            <a>商户：</a>
            <input id="searchMer" value="">
        </div>
    </div>

    <div>
        <table id="View" border="0"></table>
    </div>
    <div id="tb1" style="background-color: #F4F4F4">
        <div style="margin-bottom: 5px">
            <a href="#" id="btnadd" class="easyui-linkbutton" iconcls="icon-add" onclick="AddDialog()" plain="true">新增餐次</a>
            <a href="#" id="btnedit" class="easyui-linkbutton" iconcls="icon-edit" onclick="UpdateDialog()" plain="true">修改餐次</a>
            <a href="#" id="btndell" class="easyui-linkbutton" iconcls="icon-cancel" onclick="DeleteDialog()" plain="true">删除餐次</a>
        </div>
    </div>

    <!--新增S-->
    <div id="AddBoxDialog" class="easyui-dialog" style="width: 300px; padding: 10px 0" closed="true" resizable="true" modal="true" buttons="#dlg-buttons" align="center">
        <form id="add_form" method="post" novalidate="novalidate">
            <table>
                <tr style="height: 20px">
                    <td class="fr">餐次名称：</td>
                    <td>
                        <input id="add_boxname" class="easyui-textbox" style="width: 150px; height: 20px" data-options="required:true">
                    </td>
                </tr>
                <tr style="height: 20px">
                    <td class="fr">备注：</td>
                    <td>
                        <input id="add_bz" class="easyui-textbox" style="width: 150px; height: 20px">
                    </td>
                </tr>
                <tr>
                    <td colspan="2" style="height: 30px">
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;
                        <a id="btnAdd" href="#" onclick="BindAddBoxClickEvent()" class="easyui-linkbutton" data-options="iconCls:'icon-ok'">保存</a>
                    </td>
                </tr>
            </table>
        </form>
    </div>
    <!--新增E-->
    <!--修改S-->
    <div id="UpdateBoxDialog" class="easyui-dialog" style="width: 300px; padding: 10px 0" closed="true" resizable="true" modal="true" buttons="#dlg-buttons" align="center">
        <form id="edit_form" method="post" novalidate="novalidate">
            <table>
                <tr style="height: 20px">
                    <td class="fr">餐次名称：</td>
                    <td>
                        <input id="e_boxname" class="easyui-textbox" style="width: 150px; height: 20px" data-options="required:true">
                    </td>
                </tr>

                <tr>
                    <td colspan="2" style="height: 30px">
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;
                        <a id="btnUpdate" href="#" onclick="BindEditBoxClickEvent()" class="easyui-linkbutton" data-options="iconCls:'icon-ok'">保存修改</a>
                    </td>
                </tr>
            </table>
        </form>
    </div>
    <!--修改E-->

    <!--修改餐次S-->
    <div id="EditCCDialog" class="easyui-dialog" style="width: 620px; padding: 10px 0" closed="true" resizable="true" modal="true" buttons="#dlg-buttons" align="center">
        <form id="edit_form" method="post" novalidate="novalidate">
            <table id="tt" style="width: 600px; height: 250px;" >
                <thead>
                    <tr>
                        <th field="DishesID" width="60" align="center">商品ID</th>
                        <th field="DishesTypeName" width="150" align="center">商品分类</th>
                        <th field="DishesNmae" width="150" align="center">商品名称</th>
                        <th field="DishesNub" width="107" align="center" editor="numberspinner">上架数量</th>
                        <th field="action" width="100" align="center" formatter="formatAction">编辑</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </form>
    </div>
    <!--修改餐次E-->

</body>
</html>
